import React, { FC } from 'react'
import { Avatar, IconCheckbox } from '../../../components'
import { Wrap, IconRemove, IconMuteHoverAndChecked, IconCancelMute, IconCancelMuteHoverAndChecked } from './style'
import { TerMode } from '../translator'
import shallow from 'zustand/shallow'
import { useMixStore } from '../store'

export const ListItem: FC<TerMode> = ({ mcc, status: { checked }, number, mtKey }) => {
	const { muteSingleOption, toggleClick, toggleCtrl, toggleShift, remove, mode } = useMixStore(
		(state) => ({
			mode: state.mode,
			muteSingleOption: state.muteSingleOption,
			toggleClick: state.toggleClick,
			toggleCtrl: state.toggleCtrl,
			toggleShift: state.toggleShift,
			remove: state.removeMt,
		}),
		shallow
	)
	const indexWidth = `${number ?? '00'}`.length * 8
	const handleCheckItem = (e: React.MouseEvent) => {
		if (e.ctrlKey) {
			toggleCtrl(mtKey)
		} else if (e.shiftKey) {
			toggleShift(mtKey)
		} else {
			toggleClick(mtKey)
		}
	}
	const handleMultiCheck = (e: React.MouseEvent) => {
		e.stopPropagation()
		toggleCtrl(mtKey)
	}
	const handleRemove = (e: React.MouseEvent) => {
		e.stopPropagation()
		remove(mtKey)
	}
	return (
		<Wrap checked={checked} indexWidth={indexWidth} title={mcc.name} onClick={handleCheckItem}>
			{mode === 2 && (
				<div className="checkbox-wrap" onClick={handleMultiCheck}>
					<IconCheckbox className="icon-checkbox" />
				</div>
			)}
			<div className="item-index">{number}</div>
			<div className="avatar">
				<Avatar value={mcc} />
			</div>
			<div className="name">
				<div className={`poll_item_name`}>{mcc.name}</div>
			</div>
			<div className="cancelMute">
				<div
					className="hover"
					onClick={(e) => {
						e.stopPropagation()
						muteSingleOption(mtKey, 0)
					}}
				>
					{!!mcc.status.isMute && <IconCancelMuteHoverAndChecked></IconCancelMuteHoverAndChecked>}
				</div>
				<div className="no_hover">{!!mcc.status.isMute && <IconCancelMute></IconCancelMute>}</div>
			</div>
			<div
				className="mute"
				onClick={(e) => {
					e.stopPropagation()
					muteSingleOption(mtKey, 1)
				}}
			>
				{!mcc.status.isMute && <IconMuteHoverAndChecked></IconMuteHoverAndChecked>}
			</div>
			{mode === 2 && <IconRemove className="remove" onClick={handleRemove} />}
		</Wrap>
	)
}
